<template>
  <div class="wrapper">
<!--    <img src="../../assets/background.jpg" alt="" style="width: 200px; position: relative;">-->
    <div style="width: 600px; height: 450px; background-color: white; border-radius: 10px;
    margin: 150px auto;padding: 50px;">
      <div style="margin: 5px;text-align: center;font-size: 50px;font-weight: bold;color: dodgerblue">学科竞赛管理系统</div>
      <el-form style="width: 100%;height: 100%" :model="user"  :rules="rules" ref="loginForm">
        <el-form-item label="账号" prop="userid" style="margin-top: 30px">
          <el-input  placeholder="请输入帐号" prefix-icon="el-icon-user" size="medium" v-model="user.usersId"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" size="medium" v-model="user.usersPassword"></el-input>
        </el-form-item>

        <el-form-item style="margin: 30px auto">
          <el-button style="width:100%" size="small"  type="primary" autocomplete="off" @click="login">登录</el-button>
<!--          <el-button style="width:48% " size="small" type="warning" autocomplete="off" @click="$router.push('/register')">注册</el-button>-->
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>
export default {

  name: "Login",
  data(){
    return{
      user: {},
      rules: {
        usersId: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' }
        ],
        usersPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    login() {
      this.$refs['loginForm'].validate((valid) => {
        if (valid) {  // 表单校验合法
          this.request.post("/Users/login", this.user).then(res => {
            if(res.code === '200') {
              const level = res.data.level
              const role=res.data.usersRole
              const newrole=role.replace('"','')

              localStorage.setItem("user", JSON.stringify(res.data.token))  // 存储用户信息到本地中
              localStorage.setItem("level", JSON.stringify(res.data.level))
              localStorage.setItem("role", newrole)


              this.$router.push({name:"用户页面",params:{level}})
              this.$message.success("登录成功")
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      });
    }
  }
}
</script>

<style>
.wrapper {
  background-image: url("../../../public/img.png");
  background-attachment: fixed;
  background-size: cover;
  height: 100vh;
  overflow: hidden;
}

/*.wrapper {*/
/*  background-image: url("../../assets/background3.jpg");*/
/*  background-attachment: fixed;*/
/*  background-size: cover;*/
/*  height: 100vh;*/
/*  overflow: hidden;*/
/*}*/
</style>